<template>
  <div v-has="'approve-query'" class="approve-manager">
    <div class="query-form">
      <query-form
        :form="searchForm"
        v-model="newApplyForm"
        @handleQuery="handleQuery"
        @handleReset="handleReset"
      />
    </div>

    <div class="base-table">
      <list-table
        :columns="columns"
        :tableList="applyList"
        :btnList="btnList"
        @onuserEdit="onuserEdit"
      />
      <!-- <el-table
        ref="multipleTableRef"
        :data="applyList"
        style="width: 100%"
        row-key="_id"
        :tree-props="{ children: 'children' }"
      >
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="item.formatter"
        ></el-table-column>

        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button
              v-has="'approve-check'"
              @click="Edit(scope.row)"
              v-show="scope.row.applyState == 1 || scope.row.applyState == 2"
              >审核</el-button
            >
          </template>
        </el-table-column>
      </el-table> -->

      <pagination :total="total" @handleCurrentChange="handleCurrentChange" />
    </div>

    <el-dialog v-model="detailsMadol" title="申请休假详情">
      <el-form
        ref="detailForm"
        label-width="100px"
        :model="cenetForm"
        :rules="rules"
      >
        <el-form-item label="申请人:">
          {{ cenetForm.applyUser.userName }}
        </el-form-item>
        <el-form-item label="休假类型:">
          {{ applyType[cenetForm.applyType] }}
        </el-form-item>
        <el-form-item label="休假时间:">
          {{ cenetForm.startTime }}
        </el-form-item>
        <el-form-item label="休假时长:">
          {{ cenetForm.leaveTime }}
        </el-form-item>
        <el-form-item label="休假原因:">
          {{ cenetForm.reasons }}
        </el-form-item>
        <el-form-item label="审批状态:">
          {{ applyState[cenetForm.applyState] }}
        </el-form-item>
        <el-form-item label="审批人:">
          {{ cenetForm.curAuditUserName }}
        </el-form-item>
        <el-form-item label="备注:" prop="remarks">
          <el-input
            v-model="cenetForm.remarks"
            :rows="2"
            type="textarea"
            placeholder="请输入审核备注"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="reject">驳回</el-button>
          <el-button type="primary" @click="adopt">审核通过</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import api from './../api'
import utils from './../utils/utils.js'
import message from '../utils/message.js'
import storage from '../utils/storage.js'
import { ref, reactive, toRaw, nextTick } from 'vue'
// 显示搜索表单
const searchForm = [
  {
    type: 'select',
    label: '审批状态',
    prop: 'applyState',
    placeholder: '审批状态',
    option: [
      {
        value: '',
        label: '全部'
      },
      {
        value: 1,
        label: '待审批'
      },
      {
        value: 2,
        label: '审批中'
      },
      {
        value: 3,
        label: '审批拒绝'
      },
      {
        value: 4,
        label: '审批通过'
      },
      {
        value: 5,
        label: '作废'
      },
    ]
  },
]
// 显示按钮
let btnList = reactive({
  tableBtn: [
    {
      type: '',
      text: '审核',
      id: 3,
      has: "'approve-check'",
      show:1,
      applyState:[1,2]
    },
  ],
})
let cenetForm = ref([])
let detailsMadol = ref(false)
let rules = reactive({
  remarks: [
    {
      required: true,
      message: "请填写审核备注",
      trigger: "blur",
    },
  ],
})
const detailForm = ref(null)

// 定义页面页码
let total = ref(10)
// 定义记录用户行为
let action = ref('pass')

// 定义请求列表
let newApplyForm = reactive({
  type: "approve",
  applyState: 1,
})
let pager = reactive({
  pageNum: 1,
  pageSize: 10
})

// 获取搜索query_form节点
const query_form = ref(null)

let applyList = ref([])

const applyState = reactive(['全部', '待审批', '审批中', '审批拒绝', '审批通过', '作废'])
const applyType = reactive(['', '事假', '调休', '年假'])
// 定义动态表格--格式
let columns = reactive([
  {
    label: '单号',
    prop: 'orderNo'
  },
  {
    label: '申请人',
    prop: 'applyUser.userName'
  },
  {
    label: '休假时间',
    prop: 'startTime',
    width: 195,
    formatter: (row, column, value) => {
      let startTime = utils.formateDate(new Date(row.startTime))
      let endTime = utils.formateDate(new Date(row.endTime))
      let timeOff = startTime.slice(0, 10) + '至' + endTime.slice(0, 10)
      return timeOff;
    }
  },
  {
    label: '休假时长',
    prop: 'leaveTime'
  },
  {
    label: '休假类型',
    prop: 'applyType',
    formatter: (row, colum, value) => {
      return applyType[value]
    }
  },
  {
    label: '休假原因',
    prop: 'reasons'
  },
  {
    label: '申请时间',
    prop: 'createTime',
    width: 165,
    formatter: (row, colum, value) => {
      return utils.formateDate(new Date(value))
    }
  },
  {
    label: '审批人',
    prop: 'auditUsers'
  },
  {
    label: '当前审批人',
    prop: 'curAuditUserName'
  },
  {
    label: '审批状态',
    prop: 'applyState',
    formatter: (row, colum, value) => {
      return applyState[value]
    }
  },
])


// 获取休假申请列表请求
let data = { ...newApplyForm, ...pager }
const getUsersList = async (data) => {
  let { list, page } = await api.getLeaveList(data)
  console.log(list);
  applyList.value = list
  total.value = page.total
}
getUsersList(data)


// 审核
const onuserEdit = (row) => {
  let userInfo = storage.getItem('userInfo')
  let userName = userInfo.userName
  if (row.row.curAuditUserName == userName) {
    detailsMadol.value = !detailsMadol.value
    cenetForm.value = row.row
    cenetForm.value.remarks = ''
  } else {
    message.message('当前审批人不是你!', 'warning')
  }
}
// 表单重置
const resetForm = () => {
  detailForm.value.resetFields()
}

// 驳回
const reject = () => {
  detailForm.value.validate((vaild) => {
    if (vaild) {
      action.value = 'refuse'
      let data = {
        _id: cenetForm.value._id,
        remark: cenetForm.value.remarks,
        action: action.value
      }
      console.log(data);
      api.postLeaveApprove(data).then(res => {
        resetForm()
        message.message('成功驳回!', 'success')
        detailsMadol.value = !detailsMadol.value
        let obj = { ...newApplyForm, ...pager }
        getUsersList(obj)
      })
    }
  })
}
// 通过
const adopt = () => {
  detailForm.value.validate((vaild) => {
    if (vaild) {
      action.value = 'pass'
      let data = {
        _id: cenetForm.value._id,
        remark: cenetForm.value.remarks,
        action: action.value
      }
      console.log(data);
      api.postLeaveApprove(data).then(res => {
        resetForm()
        message.message('通过成功!', 'success')
        detailsMadol.value = !detailsMadol.value
        let obj = { ...newApplyForm, ...pager }
        getUsersList(obj)
      })
    }
  })
}

// 查询
const handleQuery = (val) => {
  let data = { ...val.value, ...pager }
  getUsersList(data)
  message.message('查询成功!', 'success')
}
// 重置
const handleReset = () => {
  message.message('重置成功!', 'success')
  getUsersList(data)
}
// 页面切换
const handleCurrentChange = async (val) => {
  let data = { ...newApplyForm, ...pager }
  data.pageNum = val
  let { list, page } = await api.getLeaveList(data)
  applyList.value = list
}
</script>

<style lang="scss" scoped>
.approve-manager {
  .query-form {
    border-radius: 5px;
    background-color: #fff;
    padding: 20px;
    .el-form-item {
      margin-bottom: 0;
    }
  }
  .base-table {
    margin-top: 20px;
    border-radius: 5px;
    .action {
      padding: 20px;
      background-color: #fff;
      border-bottom: 1px solid #eef0f3;
    }
    .page {
      margin: 10px auto;
      float: right;
    }
  }
}
</style>